<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../../build/dist/css/bsui_all.css">
    <title>Document</title>
    <style>        
        .box {margin-top: 50px; text-align: center;}
        .bsui-button + .bsui-button {margin-left: 20px;}
    </style>
</head>
<body>
    <div class="box">
        <button class="bsui-button bsui-button-primary" id="demoBtn1" data-loading="处理中...">            
            <span>提交</span>
        </button>
        <button class="bsui-button bsui-button-danger" id="demoBtn2" data-loading="正在删除，请勿关闭">            
            <i class="bsui-icon-trash-2"></i>
            <span>删除</span>
        </button>
        <button class="bsui-button bsui-button-success" id="demoBtn3">                        
            <span>下一步</span>
            <i class="bsui-icon-arrow-right"></i>
        </button>
        <button class="bsui-button bsui-button-success" id="demoBtn4">                        
            <span>保存</span>
        </button>
    </div>
    <script src="../../../build/dist/js/sea-2.1.1.min.js"></script>
    <script>
    seajs.use('sea-config', function() {
        seajs.use('btnLoading', function() {
            $('#demoBtn1, #demoBtn2, #demoBtn3, #demoBtn4').on('click', function(e) {
                e.preventDefault();
                var $this = $(this);
                if ($this.is('#demoBtn4')) {
                    $this.btnLoading('保存中...');
                } else {
                    $this.btnLoading(true);
                }
                removeLoading($this);
            });
    
            function removeLoading(_this) {
                setTimeout(function() {
                    _this.btnLoading(false);
                }, 2000);
            }
        });
    });
</script>
</body>
</html>